<template>
    <mu-card class="monitor">
        <mu-card-header>游戏监控</mu-card-header>
        <mu-card-text>
            <div>当前游戏人数:{{total_player_number}}</div>
            <div>当前正在使用中的房间数:{{room_page_info.total}}</div>
        </mu-card-text>
        <mu-card-text>
            <mu-row gutter>
                <mu-col v-for="(room, i) in room_page_info.list"
                        :key="room.id"
                        width="100"
                        tablet="50"
                        desktop="20">
                    <mu-paper class="room-item"
                              :zDepth="room._zDepth"
                              @mouseenter.native="room._zDepth=2"
                              @mouseleave.native="room._zDepth=1">
                        <mu-list>
                            <mu-sub-header>房间基本信息</mu-sub-header>
                            <mu-list-item disableRipple
                                          describeText="房号"
                                          :title="room.id">
                            </mu-list-item>
                            <mu-list-item disableRipple
                                          describeText="模式"
                                          :title="room.mode">
                            </mu-list-item>
                            <mu-list-item disableRipple
                                          describeText="人数"
                                          :title="room.player_number+'人模式'">
                            </mu-list-item>
                        </mu-list>
                        <mu-divider />
                        <mu-list>
                            <mu-sub-header>玩家信息</mu-sub-header>
                            <mu-list-item v-for="(player,player_i) in room.players"
                                          :key="player.id"
                                          :describeText="'玩家'+(player_i+1)"
                                          :title="player.info.username">
                                <mu-avatar slot="left"
                                           :src="player.info.headimgurl" />
                            </mu-list-item>
                        </mu-list>
                    </mu-paper>
    
                </mu-col>
            </mu-row>
        </mu-card-text>
        <mu-card-actions>
            <mu-pagination :total="room_page_info.total"
                           :current="room_page_info.page"
                           :pageSize="room_page_info.num"
                           :showSizeChanger="true"
                           :pageSizeOption="[10,20,50]"
                           @pageChange="handleCurrentChange"
                           @pageSizeChange="handleSizeChange">
            </mu-pagination>
        </mu-card-actions>
    </mu-card>
</template>
<script>
import { componentWrapper, on } from './componentWrapper';

export default componentWrapper({
    pagination: {
        request(current_route, callback) {
            callback(vm => vm.is_loading_room_list_info = true);
            socket_promise.then(() => {
                socket.emit("online-room-info", {
                    num: current_route.query.num,
                    page: current_route.query.page,
                    auto_watch: true
                });
                socket.once("online-room-info-result", room_page_info => {
                    callback(vm => {
                        vm.is_loading_room_list_info = false;
                        room_page_info.list.forEach(room => {
                            room._zDepth = 1;
                        });
                        vm.room_page_info = room_page_info;
                    });
                });
            });
        }
    },
    data() {
        return {
            total_player_number: 0,
            room_page_info: {
                total: 0,
                page: 1,
                num: 10,
                list: [],
            },
            is_loading_room_list_info: false,
        }
    },
    created() {
        socket_promise.then(() => {
            const offs = this.offs;
            // 监听在线人数变动
            offs[offs.length] = on(socket, "online-player-number", total_player_number => {
                this.total_player_number = total_player_number;
            });
            // 请求在线人数数量
            socket.emit("online-player-number");
            // 监听在线房间数量变动
            offs[offs.length] = on(socket, "online-room-number", total_room_number => {
                this.room_page_info.total = total_room_number;
            });
            // 监听房间状态变动
            offs[offs.length] = on(socket, "room-changed", changed_room => {
                this.room_page_info.list && this.room_page_info.list.some(room => {
                    if (room.id === changed_room.id) {
                        Object.assign(room, changed_room);
                    }
                });
            });
        });

    }
});
</script>
<style scoped>
.room-item {
    margin-bottom: 1em;
}
</style>